<template>
  <div class="fullpage">
    <div class="left">

      <div class="box">
        <div class="hd">
          <h5 class="title">能耗信息总览</h5>
        </div>
        <div class="bd">

          <div class="info-list">
            <div class="item">
              <span class="crile"></span>
              <span class="text">综合能源利用效率(%)</span>
              <span class="num">{{overview.energyUtilizaEff}}</span>
            </div>
            <div class="item">
              <span class="crile"></span>
              <span class="text">可再生能源利用效率(%)</span>
              <span class="num green">{{overview.reEnergyUtilizaEff}}</span>
            </div>
          </div>

          <div class="list">
            <div class="item">
              <div class="thumb">
                <img src="../../../assets/img/fullpage/left-1.png" class="icon" />
              </div>
              <div class="desc">
                <div class="name">耗电量(亿瓦时)</div>
                <div class="num">{{overview.useedElecTotal}}</div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="../../../assets/img/fullpage/left-2.png" class="icon" />
              </div>
              <div class="desc">
                <div class="name">耗水量(亿吨)</div>
                <div class="num">{{overview.useedWaterTotal}}</div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="../../../assets/img/fullpage/left-3.png" class="icon" />
              </div>
              <div class="desc">
                <div class="name">耗气量(亿立方米)</div>
                <div class="num">{{overview.useedGasTotal}}</div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="../../../assets/img/fullpage/left-4.png" class="icon" />
              </div>
              <div class="desc">
                <div class="name">热(亿千焦)</div>
                <div class="num">{{overview.useedHeatTotal}}</div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="box">
        <div class="hd">
          <h5 class="title">总供能情况</h5>
          <div class="tabs">
            <div
                v-for="item in energys"
                :key="item.value"
                :class="['item', { 'active': item.value === activeEnergyType }]"
                @click="changeEnergyType(item)"
            >
              {{item.label}}
            </div>
          </div>
        </div>
        <div class="bd">
          <div class="info">
            本月功能总有功(千瓦时)
            <span class="color">{{supply.pgen}}</span>
          </div>
          <div id="echarts-left-line">
            <z-chart :chart-option="supplyChartOption" />
          </div>
        </div>
      </div>

      <div class="box">
        <div class="hd">
          <h5 class="title">告警情况</h5>
        </div>
        <div class="bd">
          <div class="info">
            本月功能总有功(千瓦时)
            <span class="color">9,858</span>
          </div>
          <div id="echarts-pie">
            <z-chart :chart-option="pieChartOption" />
          </div>
        </div>
      </div>


    </div>
    <div class="center">
      <div class="tit">
        <img src="../../../assets/img/fullpage/logo.png" class="icon" />
      </div>
      <div class="time"> 累计数据截止：2020年04月27日</div>
      <div id="echarts-map">
        <z-chart :chart-option="mapChartOption" @click="mapClick" />
        <div class='z-test-map-too'>
          <!-- 每段文字对齐 0 20 40 60 80 100 -->
          <div class="z-test-map-too-text">0</div>
          <div class="z-test-map-too-text">20</div>
          <div class="z-test-map-too-text">40</div>
          <div class="z-test-map-too-text">60</div>
          <div class="z-test-map-too-text">80</div>
          <div class="z-test-map-too-text">100</div>
        </div>
      </div>
    </div>
    <div class="right">

      <div class="box">
        <div class="hd">
          <h5 class="title">环境信息监测</h5>
          <div class="tip">天气 ： {{weather.weather}}</div>
        </div>
        <div class="bd">
          <div class="list list-row-3">
            <div class="item">
              <div class="thumb">
                <img src="../../../assets/img/fullpage/right-1.png" class="icon" />
              </div>
              <div class="desc">
                <div class="name">温度(°c)</div>
                <div class="num">{{weather.temperature}}</div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="../../../assets/img/fullpage/right-2.png" class="icon" />
              </div>
              <div class="desc">
                <div class="name">湿度(%)</div>
                <div class="num">{{weather.humidity}}</div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="../../../assets/img/fullpage/right-3.png" class="icon" />
              </div>
              <div class="desc">
                <div class="name">雨量(mm)</div>
                <div class="num">{{weather.rainfall}}</div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="../../../assets/img/fullpage/right-4.png" class="icon" />
              </div>
              <div class="desc">
                <div class="name">风向</div>
                <div class="num">{{weather.windDirection}}</div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="../../../assets/img/fullpage/right-5.png" class="icon" />
              </div>
              <div class="desc">
                <div class="name">风速(m/s)</div>
                <div class="num">{{weather.windSpeed}}</div>
              </div>
            </div>
            <div class="item">
              <div class="thumb">
                <img src="../../../assets/img/fullpage/right-6.png" class="icon" />
              </div>
              <div class="desc">
                <div class="name">辐射强度(w/m3)</div>
                <div class="num">{{weather.irradiation}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="box">
        <div class="hd">
          <h5 class="title">总用能概况</h5>
          <div class="tabs">
            <div
                v-for="item in energys"
                :key="item.value"
                :class="['item', { 'active': item.value === activeUseEnergyType }]"
                @click="changeUseEnergyType(item)"
            >
              {{item.label}}
            </div>
          </div>
        </div>
        <div class="bd">
          <div class="info">
            本月功能总有功(千瓦时)
            <span class="color">{{useEnergy.pgen}}</span>
          </div>
          <div id="echarts-right-line">
            <z-chart :chart-option="useEnergyChartOption" />
          </div>
        </div>
      </div>

      <div class="box">
        <div class="hd">
          <h5 class="title">CPS运营监控</h5>
        </div>
        <div class="bd">
          <div class="table">
            <div class="header">
              <div class="th span1">GPS系统名称</div>
              <div class="th span2">故障状态</div>
              <div class="th span3">操作</div>
            </div>
            <div class="body">

              <div v-for="(item,index) in monitor" class="item">
                <div @click="toggle(item,index)" class="tr">
                  <div class="td span1">
                    <img v-if="!item.show" class="icon" src="../../../assets/img/fullpage/bottom.png" alt="" />
                    <img v-if="item.show" class="icon" src="../../../assets/img/fullpage/top.png" alt="" />
                    <span class="text">{{item.custName}}</span>
                  </div>
                  <div v-if="item.status == 0" class="td span2">
                    <span class="cirle red"></span>
                    <span class="text">故障</span>
                  </div>
                  <div v-if="item.status == 1" class="td span2">
                    <span class="cirle"></span>
                    <span class="text">正常</span>
                  </div>
                  <div class="td span3">
                    <span class="text"></span>
                  </div>
                </div>
                <div v-if="item.show" class="sub-item">
                  <div v-for="el in item.cpsSystemVOS" class="tr">
                    <div class="td span1">
                      <span class="text">{{el.name}}</span>
                    </div>
                    <div v-if="el.status == 0" class="td span2">
                      <span class="cirle red"></span>
                      <span class="text">故障</span>
                    </div>
                    <div v-if="el.status == 1" class="td span2">
                      <span class="cirle"></span>
                      <span class="text">正常</span>
                    </div>
                    <div class="td span3">
                      <span class="text">跳转</span>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import echarts from "echarts";
  import ZChart from "@/components/echarts/zchart";
  import data from '@/static/hunan1.json'
  import zhuzhou from '@/static/zhuzhou.json'
  import { axiosGet } from '@/api/sysSetting.js'

  const colors = ["#FC7F7D", "#91D66C", "#00AAFF"];
  let pieData = []

  function baiStr (val, i) {
    if (val < 10) {
      return `\t\t\t\t\t\t\t\t\t\t\t{t1|00}{b${i}|${val}%}`
    }
    if (val > 10 && val < 100) {
      return `\t\t\t\t\t\t\t\t\t\t\t{t1|0}{b${i}|${val}%}`
    }
    return `\t\t\t\t\t\t\t\t\t\t\t{b${i}|${val}%}`
  }

  export default {
    name: "fullpage",
    components: { ZChart },
    data () {
      return {
        useEnergyChartOption: {
          grid: {
            top: 30,
            bottom: 30,
            right: 0
          },
          xAxis: {
            type: 'category',
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: '#AEE1FF',
              fontSize: 14,
              formatter: val => {
                // const arr = this.lineChartOption.series.data
                let str = ''
                // if (val === arr[arr.length - 1].days) {
                //   str = '(日)'
                // }
                return (val > 9 ? val : '0' + val) + str
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#163072',
                width: 2
              }
            },
          },
          yAxis: {
            splitNumber: 4,
            axisLabel: {
              color: '#AEE1FF',
              fontSize: 14
            },
            nameTextStyle: {
              color: '#AEE1FF',
              fontSize: 14
            },
            name: '电量(千瓦时）',
            axisLine: {
              show: false
            },
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#163072'
              }
            },
            axisTick: {
              show: false
            },
          },
          series: {
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#46A4F7'
              }, {
                offset: 1,
                color: 'transparent'
              }])
            },
            symbol: 'none',
            itemStyle: {
              color: '#46A4F7'
            },
            data: [],
            type: 'line'
          }
        },
        supplyChartOption: {
          grid: {
            top: 30,
            bottom: 30,
            right: 0
          },
          xAxis: {
            type: 'category',
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: '#AEE1FF',
              fontSize: 14,
              formatter: val => {
                // const arr = this.lineChartOption.series.data
                let str = ''
                // if (val === arr[arr.length - 1].days) {
                //   str = '(日)'
                // }
                return (val > 9 ? val : '0' + val) + str
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#163072',
                width: 2
              }
            },
          },
          yAxis: {
            splitNumber: 4,
            axisLabel: {
              color: '#AEE1FF',
              fontSize: 14
            },
            nameTextStyle: {
              color: '#AEE1FF',
              fontSize: 14
            },
            name: '电量(千瓦时）',
            axisLine: {
              show: false
            },
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#163072'
              }
            },
            axisTick: {
              show: false
            },
          },
          series: {
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#46A4F7'
              }, {
                offset: 1,
                color: 'transparent'
              }])
            },
            symbol: 'none',
            itemStyle: {
              color: '#46A4F7'
            },
            data: [],
            type: 'line'
          }
        },
        mapChartOption: {
          geo: [
            {
              top: 72,
              map: 'Map',
              aspectScale: 0.85,
              layoutCenter: ['50%', '50%'],
              layoutSize: 580,
              itemStyle: {
                normal: {
                  borderWidth: 8,
                  borderColor: '#062153',
                  areaColor: '#0e2d69',
                  shadowColor: "#081029",
                  shadowBlur: 8,
                  shadowOffsetX: 0,
                  shadowOffsetY: 6
                }
              },
            },
            {
              top: 72,
              map: 'Map',
              aspectScale: 0.85,
              layoutCenter: ['50%', '50%'],
              layoutSize: 580,
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor: '#0885E6',
                  areaColor: '#0e2d69',
                  shadowColor: "#081029",
                  shadowBlur: 8,
                  shadowOffsetX: 0,
                  shadowOffsetY: 6
                }
              },
            }
          ],
          visualMap: {
            type: 'piecewise',
            splitNumber: 5,
            itemWidth: 60,
            itemHeight: 18,
            pieces: [
              {
                start: 0,
                end: 0,
                label: '0',
                color: "#0e2d69"
              },
              {
                start: 0,
                end: 20,
                label: '20',
                color: "#163c82"
              },
              {
                start: 20,
                end: 40,
                label: '40',
                color: "#154297"
              },
              {
                start: 40,
                end: 60,
                label: '60',
                color: "#174baf"
              },
              {
                start: 60,
                end: 80,
                label: '80',
                color: "#2963D3"
              }
            ],
            seriesIndex: [1],
            left: 'center',
            orient: 'horizontal',
            itemGap: 5,
            backgroundColor: '#0a1b55',
            showLabel: false,
            bottom: 20,
            controller: {
              inRange: {
                symbol: 'rect',
              }
            },
          },
          series: [
            {
              name: "定位点",
              type: 'effectScatter',
              coordinateSystem: 'geo',
              label: {
                show: true,
                position: 'bottom',
                color: '#fff',
                formatter: obj => obj.name
              },
              itemStyle: {
                normal: {
                  color: '#36ffb1',
                }
              },
              // effectType: 'ripple',
              // showEffectOn: 'emphasis', // 高亮（hover）的时候显示特效。
              // silent: true, // 图形是否不响应和触发鼠标事件
              // hoverAnimation: false,
              // legendHoverLink: false,
              rippleEffect: {
                period: 104,
                brushType: 'fill',
              },
              symbolSize: 6,
              zlevel: 1,
              data: []
            },
            {
              top: 72,
              type: "map",
              zlevel: 0,
              aspectScale: 0.85,
              layoutCenter: ['50%', '50%'],
              layoutSize: 580,
              geoIndex: 2,
              map: "Map",
              data: {},
              itemStyle: {
                normal: {
                  areaColor: '#323c48',
                  borderColor: '#2F5BAF',
                  borderWidth: 1
                },
                emphasis: {
                  areaColor: 'rgba(19,74,172,0.97)',
                }
              },
              label: {
                normal: {
                  // show: true, //显示省份标签
                  textStyle: {
                    color: "#fff", //省份标签字体颜色
                    fontSize: 12
                  },
                },
                emphasis: {
                  // 对应的鼠标悬浮效果
                  show: false,
                  textStyle: {
                    color: "#fff"
                  }
                }
              }
            }
          ]
        },
        pieChartOption: {
          color: colors,
          backgroundColor: '#0F2553',
          legend: {
            right: 20,
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10,
            top: 'middle',
            itemGap: 25,
            textStyle: {
              fontSize: 14,
              // width: 200,
              rich: {
                a: {
                  align: 'left',
                  color: '#ADE1FF',
                },
                a1: {
                  align: 'center',
                  color: colors[0]
                },
                a2: {
                  align: 'center',
                  color: colors[1]
                },
                a3: {
                  align: 'center',
                  color: colors[2]
                },
                b1: {
                  align: 'right',
                  color: colors[0]
                },
                b2: {
                  align: 'right',
                  color: colors[1]
                },
                b3: {
                  align: 'right',
                  color: colors[2]
                },
                t1: {
                  color: 'transparent'
                }
              }
            },
            orient: 'vertical',
            formatter: name => {
              const index = pieData.findIndex(ele => ele.name === name)
              const ele = pieData[index]
              const i = index + 1
              return [
                `{a|${name}}`,
                `{a${i}|\t\t\t\t\t\t\t\t\t\t\t\t\t\t${ele.alarmNum}}`,
                baiStr(ele.alarmPercent, i),
              ].join('')
            }
          },
          series: [
            {
              type: 'pie',
              radius: ['32%', '70%'],
              center: ['20%', "50%"],
              hoverAnimation: false,
              label: {
                show: false,
                position: 'center'
              },
              itemStyle: {
                normal: {
                  borderColor: '#0F2553',
                  borderWidth: 4
                }
              },
              labelLine: {
                show: false
              },
              data: [],
              z: 1
            },
            {
              silent: true,
              itemStyle: {
                normal: {
                  color: '#294857',
                  borderColor: '#0F2553',
                  borderWidth: 4
                }
              },
              type: 'pie',
              hoverAnimation: false,
              radius: ['26%', '33%'],
              center: ['20%', "50%"],
              label: {
                normal: {
                  show: false
                }
              },
              data: [],
              z: 2
            }
          ]
        },
        overview: {},
        weather: {},
        monitor: [],
        supply: {
          pgen: '0',
          children: []
        },
        useEnergy: {
          pgen: '0',
          children: []
        },
        energys: [
          { label: '用电', value: 1 },
          { label: '用水', value: 2 },
          { label: '用气', value: 3 },
          { label: '用热', value: 4 },
        ],
        activeEnergyType: 1,
        activeUseEnergyType: 1,
        alarmOvervice: {
          alarmStatisticsVOS: []
        },
        cpsDist: {
          areaName: '',
          areaNo: '',
          areaType: '', // 区域等级
          siteNum: 0,
          children: []
        }
      };
    },
    computed: {},
    created () {
      this.initOverview()
      this.initWeather()
      this.initMonitor()
      this.initSupply()
      this.initUseEnergy()
      this.getAlarmOvervice()
      this.getCPSDist()
    },
    mounted () {
      // this.$nextTick(() => this.getGeoJson(data))
      // axiosGet('/cps/areas_v2/bound/430382.json', {}).then((data) => {
      //   this.cpsDist = data.result;
      // })
    },
    methods: {
      mapClick (params) {
        if (params.data.areaType === '03') {
          // 该级别的城市不再查询
          return
        }
        const code = params.data.cityCode
        axiosGet(`/cps/areas_v2/bound/${code}_full.json`).then(data => {
          this.getGeoJson(data)
        })
      },
      changeEnergyType (item)  {
        this.activeEnergyType = item.value
        this.initSupply()
      },
      changeUseEnergyType (item)  {
        this.activeUseEnergyType = item.value
        this.initUseEnergy()
      },

      toggle (item, index) {
        this.$set(item, 'show', !item.show)
      },
      initOverview () {
        axiosGet('http://222.189.228.150:7016/scada/panoramahall/overview', {}).then((data) => {
          this.overview = data.result;
        })
      },
      initWeather () {
        axiosGet('http://222.189.228.150:7016/scada/panoramahall/getWeather', {}).then((data) => {
          this.weather = data.result;
        })
      },
      initMonitor () {
        axiosGet('http://222.189.228.150:7016/scada/panoramahall/listCPSMonitor', {}).then((data) => {
          this.monitor = data.result;
        })
      },
      getAlarmOvervice () {
        axiosGet('http://222.189.228.150:7016/scada/panoramahall/getAlarmOvervice', {}).then((data) => {
          this.alarmOvervice = data.result;
          pieData = this.alarmOvervice.alarmStatisticsVOS.map(item => ({ name: item.alarmName, value: item.alarmNum, ...item }))
          this.pieChartOption.series[0].data = pieData
          this.pieChartOption.series[1].data = pieData
        })
      },
      // 总供能情况
      initSupply () {
        axiosGet('http://222.189.228.150:7016/scada/panoramahall/listGenEnergyChart', {
          energyType: this.activeEnergyType
        }).then((data) => {
          this.supply = data.result;
          this.supplyChartOption.series.data = this.supply.children.map(item => [item.days, item.energySupplyDay || 0])
        })
      },
      // 总用能情况
      initUseEnergy () {
        axiosGet('http://222.189.228.150:7016/scada/panoramahall/listUseEnergyChart', {
          energyType: this.activeUseEnergyType
        }).then((data) => {
          this.useEnergy = data.result;
          this.useEnergyChartOption.series.data = this.useEnergy.children.map(item => [item.days, item.energySupplyDay || 0])
        })
      },
      // 总用能情况
      getCPSDist () {
        axiosGet('http://222.189.228.150:7016/scada/panoramahall/getCPSDist').then((data) => {
          this.cpsDist = data.result;
          /* this.cpsDist[0].areaNo */
          // $.getJSON(`https://geo.datav.aliyun.com/areas_v2/bound/${430000}_full.json`, data => {
          //   this.getGeoJson(data)
          // })
          axiosGet(`/cps/areas_v2/bound/${this.cpsDist.areaNo}_full.json`).then(data => {
            this.getGeoJson(data)
          })
        })
      },

      getGeoJson (data) {
        this.formatMapData(data.features)
      },
      formatMapData (Json) {
        let mapData = []
        let geoData = []
        let mapJson = {}
        Json.forEach(item => {
          geoData.push({
            name: item.properties.name,
            value: item.properties.centroid.concat(1),
          })
          const cityCode = item.properties.adcode
          const obj = this.cpsDist.children.find(e => e.areaNo === cityCode) || {}
          mapData.push({
            name: item.properties.name,
            value: obj.siteNum,
            level: item.properties.level,
            cityCode: item.properties.adcode,
            ...obj
          })
        })
        // geoJson必须这种格式
        mapJson.features = Json
        // 去渲染echarts
        this.initECharts({ mapData, mapJson, geoData })
      },
      initECharts (option) {
        this.$echarts.registerMap('Map', option.mapJson)
        this.mapChartOption.series[0].data = option.geoData
        this.mapChartOption.series[1].data = option.mapData
      },
    }
  };
</script>

<style scoped lang="scss">
  * {
    font-family: Microsoft YaHei;
  }

  .table {
    display: flex;
    flex-direction: column;
    border-top: 1px solid RGBA(23, 48, 105, 1);
    border-right: 1px solid RGBA(23, 48, 105, 1);
    margin-top: 1.125vw;
  }

  .table .th,
  .table .td {
    display: flex;
    align-items: center;
  }

  .table .span1 {
    width: 10vw;
  }

  .table .span2 {
    width: 6.25vw;
  }

  .table .span3 {
    width: 6.875vw;
  }

  .table .cirle {
    width: 0.625vw;
    height: 0.625vw;
    background: #90D66D;
    border-radius: 50%;
    margin-right: 0.625vw;
  }

  .table .cirle.red {
    width: 0.625vw;
    height: 0.625vw;
    background: #FC7F7D;
    border-radius: 50%;
  }

  .table .icon {
    margin-right: 0.625vw;
  }

  .table .th,
  .table .td {
    border-left: 1px solid RGBA(23, 48, 105, 1);
    padding-left: 0.625vw;
    font-size: 0.875vw;
    font-weight: bold;
    color: #ADE1FF;
  }

  .table .header {
    background-color: RGBA(12, 32, 81, 1);
    height: 2.5vw;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid RGBA(23, 48, 105, 1);
  }

  .table .body {
    background-color: RGBA(14, 35, 85, 1);
    height: 13.125vw;
    overflow: scroll;
  }

  .table .body::-webkit-scrollbar {
    background-color: transparent;
  }

  .table .body::-webkit-scrollbar-thumb {
    background-color: rgba(12, 32, 81, 1);
  }

  .table .body .item .tr {
    height: 2.8125vw;
    border-bottom: 1px solid RGBA(23, 48, 105, 1);
    display: flex;
    flex-direction: row;
    cursor: pointer;
  }

  .table .body .sub-item {
    display: flex;
    flex-direction: column;
  }

  .table .body .sub-item .span1 {
    padding-left: 3.75vw;
  }

  .table .body .sub-item .tr {
    height: 2.5vw;
    border: 0px;
  }

  .table .body .sub-item .td {
    border: 0px;
  }

  #echarts-right-line,
  #echarts-left-line {
    height: 15vh;
  }

  #echarts-pie {
    height: 12.5vw;
    margin-top: 1.125vw;
  }

  .fullpage {
    background: url(../../../assets/img/fullpage/bg.png) center center no-repeat;
    background-size: 100% 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .fullpage .box {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.625vw;
    overflow: hidden;
    background: rgba(14, 40, 91, 0.5);
    margin-top: 1.52vh;
    box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.2);
  }

  .fullpage .box .hd {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .fullpage .box .hd .title {
    font-size: 1vw;
    font-family: Microsoft YaHei;
    font-weight: 400;
    height: 20px;
    display: flex;
    align-items: center;
    padding-left: 0.352vw;
    color: #00A4FF;
    border-left: 0.3125vw solid rgba(0, 164, 255, 1);
  }

  .fullpage .box .hd .tip {
    font-size: 14px;
    font-weight: 400;
    color: #ADE1FF;
  }

  .fullpage .box .bd .info {
    font-size: 1vw;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ADE1FF;
    display: flex;
    flex-direction: row;
    margin-top: 1.5vw;
    align-items: center;
  }

  .fullpage .box .bd .info .color {
    font-size: 1.25vw;
    color: #fff;
    margin-left: 1.2vw;
  }

  .fullpage .box .list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .fullpage .box .list-row-3 {
    margin-top: 2.59vw;
  }

  .fullpage .box .list .item {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .fullpage .box .list-row-3 .item {
    width: 33.333%;
    padding-right: 0.625vw;
    background: url(../../../assets/img/fullpage/clip.png) right center no-repeat;
  }

  .fullpage .box .list-row-3 .item:nth-of-type(3n) {
    background-image: none;
  }

  .fullpage .box .list-row-3 .item:nth-of-type(n+4) {
    margin-top: 1.6vw;
  }

  .fullpage .box .list .item .thumb {
    width: 5.1875vw;
    height: 4.4375vw;
  }

  .fullpage .box .list .item .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .fullpage .box .list .item .desc .name {
    font-size: 0.875vw;
    font-weight: 400;
    color: #ADE1FF;
  }

  .fullpage .box .list .item .desc .num {
    font-size: 1.25vw;
    font-weight: 400;
    color: #FFFFFF;
  }

  .fullpage .left {
    /*width: 35.9375vw;*/
    width: 30%;
  }

  .fullpage .left .list {
    background-image: url('../../../assets/img/fullpage/gril.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .fullpage .left .info-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 1.125vw;
    margin-bottom: 1.125vw;
  }

  .fullpage .left .info-list .item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .fullpage .left .info-list .item .crile {
    width: 0.625vw;
    height: 0.625vw;
    background: linear-gradient(90deg, #FEA529, #F7DE55);
    border-radius: 50%;
  }

  .fullpage .info-list .item .text {
    color: rgba(173, 225, 255, 1);
    font-size: 0.875vw;
    margin: 0px 0.625vw;
  }

  .fullpage .info-list .item .num {
    color: rgba(252, 127, 125, 1);
    font-size: 1.25vw;
  }

  .fullpage .info-list .item .num.green {
    color: rgba(144, 214, 109, 1);
  }

  .fullpage .tabs {
    display: flex;
    flex-direction: row;
  }

  .fullpage .tabs .item {
    width: 3vw;
    height: 1.375vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0D2F7B;
    border-radius: 2px;
    font-size: 0.75vw;
    font-weight: 400;
    color: #FFFFFF;
    margin-left: 0.625vw;
    cursor: pointer;
  }

  .fullpage .tabs .item.active {
    background-color: rgba(8, 147, 253, 1)
  }

  .fullpage .center {
    /*flex: 1;*/
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    /*padding: 0 4.1875vw;*/
    width: 40%;
  }

  .fullpage .center .tit {
    margin-top: 2.0625vw;
  }

  .fullpage .center #echarts-map {
    /*flex: 1;*/
    height: 100%;
    position: relative;
  }

  .fullpage .center .tit .icon {
    width: 26.875vw;
    height: 5vw;
  }

  .fullpage .center .time {
    font-size: 14px;
    font-weight: 400;
    color: #ADE1FF;
    margin-top: 1.4375px;
    width: 26.875vw;
    text-align: right;
  }

  .fullpage .right {
    /*width: 35.9375vw;*/
    width: 30%;
  }

  .z-test-map-too {
    position: absolute;
    width: 330px; // 每个 itemWidth 是 60，itemGap 是 5，一共 230
    height: 28px; // 每个 itemHeight 是 18，itemGap 是 5，一共 24
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    user-select: none;
  }

  .z-test-map-too-text {
    color: #ADE1FF;
    font-size: 14px;
    position: absolute;
    top: 50%;

    &:first-child {
      left: 5px;
      transform: translate(-50%, -50%);
    }

    &:nth-child(2) {
      left: 65px;
      transform: translate(-50%, -50%);
    }

    &:nth-child(3) {
      left: 130px;
      transform: translate(-50%, -50%);
    }

    &:nth-child(4) {
      left: 195px;
      transform: translate(-50%, -50%);
    }

    &:nth-child(5) {
      left: 260px;
      transform: translate(-50%, -50%);
    }

    &:nth-child(6) {
      left: 325px;
      transform: translate(-50%, -50%);
    }
  }
</style>
